<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view style="display: flex;background-color: #FFFFFF;border-bottom: 2upx solid #F5F5F5;margin: 20upx;border-radius: 8upx;">
			<view class="input-view">
				<uni-icon type="search" size="17" color="#3CA4FA" />
				<input confirm-type="search" :disabled="isShow" :focus="!isShow" class="input" type="text" @tap="doModelShow('input')" @input="doChangeValue" placeholder="输入搜索车牌/车主姓名" @confirm="confirm" />
			</view>
			<view class="zcModel-active iconfont icon-shaixuan" @tap="doModelShow">
				筛选
			</view>
		</view>
		
		<!-- 列表栏 -->
		<view class="zcModelItem" v-show="isShow">
			<scroll-view class="list" scroll-y @scrolltolower="loadMore">
				<block v-for="(item,index) in InsurePolicy" :key="index" >
					<view class="zcModel-card" @tap="zcInsurePolicyInfo(item)">
						<view class="zcModel-card-title uni-flex zcAlignI_center zcJustifyC_between">
							<view class="uni-flex zcAlignI_center">
								<view class="uni-flex zcAlignI_center" style="width:75upx;margin-right: 8px;">
									<image v-if="item.InsureCompany" :src="imgPath+'UniImages/ZH_renbao.png'" mode="widthFix" style="width: 100%;"></image>
								</view>
								<view class='insureCompany'>{{item.InsureCompany}}</view>
							</view>
							<view class="uni-flex zcAlignI_center">
								<view>￥</view>
								<view class='insureCompany'>{{item.InsureMoney}}</view>
							</view>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_between list_info_middle">
							<view class="uni-flex zcFlex_column  list_info_left zcRelative">
								<view class="">{{item.VehiclePlateNo}}</view>
								<view class="">{{item.CustomerName}}</view>
							</view>
							<view class="uni-flex zcFlex_column">
								<view class="">车型</view>
								<view class="">{{item.VehicleType}}</view>
								<view class="">VIN码</view>
								<view class="">{{item.VehicleVIN}}</view>
							</view>
							<view class="">经济型</view>
						</view>
						<view class="zcModel-card-foot uni-flex zcAlignI_center zcJustifyC_between list_info_bottom">
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">险种类别</view>
								<view class="">{{item.InsureTypeCategory}}</view>
							</view>
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">联系方式</view>
								<view class="">{{item.CustomerTelephone}}</view>
							</view>
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">出单时间</view>
								<view class="">{{item.InsureSubmitDate}}</view>
							</view>
						</view>
					</view>
															
				</block>
				<view class="uni-tab-bar-loading">
					{{loadingText}}
				</view>
				<view v-if="InsurePolicy.length <1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
					<view class="no_model">
						<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
						<view class="no_text">暂无数据</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
        <view class="content uni-flex zcFlex_column" style="background: #FFFFFF;padding: 20upx;" v-show="!isShow">
        	<view class="uni-flex zcAlignC_center zcJustifyC_end">
        		<button @tap="zcResetLebel" class="zcBut" type="primary">重置</button>
        		<button class="zcBut" type="primary" @tap="zcQueryInsurePolicy4SalesMan('')">确认</button>
        	</view>
        	
        	<scroll-view scroll-y style="overflow: auto;">
        		<block v-for="(item,index) in labels" :key="index">
        			<view class="uni-flex zcFlex_column" style="background-color: #FFFFFF;">
        				<view class="zcModel-title zcJustifyC_between">{{item.title}}</view>
        				<view v-show="item.isShow" class="popup_content">
        					<block v-for="(item1,idx) in item.list" :key="idx">
        						<view :data-popupId="index" class="popup_item" :class="{active:item.actives.indexOf(idx) !== (-1)}" :id="idx" :style="{'flex': '0 0 '+item.row+'%'}" @tap="doChenkItem2">{{item1.Name}}</view>
        					</block>
        				</view>
        			</view>
        		</block>
        	</scroll-view>
        </view>
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	
	let _this;
	export default {
		components:{
			uniIcon
		},
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				isNoDataShow:false,
                isShow:true,
				StartRow:0,	//	当前页数据开始下标
				dataLength:0,	//	当前页 数据返回个数
				inputValue:'',	// 输入框值
				loadingText:'',
                labels:[],
                labelInfos:[],
				InsurePolicy:[
					// {InsureCompany:'平安',InsureMoney:'5000',VehiclePlateNo:'川A001',CustomerName:'张三'}
				],
			}
		},
		onLoad() {
			_this = this;
			_this.zcGetInsurePolicyQueryCondition();
			_this.zcQueryInsurePolicy4SalesMan('init');
		},
		methods: {
            doModelShow(type) {
            	if (type === 'input') {
            		if (_this.isShow) {
            			_this.isShow = false;
            		}
            	}else {
            		_this.isShow = !_this.isShow;
            	}
            },
            //	获取 输入框值
            doChangeValue(res) {
            	_this.inputValue = res.detail.value;
            },
            //  监听手机 点击键盘右下角  完成/搜索  事件
            confirm(e) {
            	if (!_this.isShow) {
            		return;
            	}
            },
			// confirm(res) {
			// 	console.log('搜索条件 = ',res);
				
			// 	_this.StartRow = 0;
			// 	_this.InsurePolicy = [];
			// 	_this.inputValue = res.target.value;
			// 	_this.zcQueryInsurePolicy4SalesMan();
			// },
            //  重置 筛选条件及标签
            zcResetLebel() {
            	_this.zcGetInsurePolicyQueryCondition();
            },
            //标签 选中 操作
            doChenkItem2(e) {	
            	// console.log('当前选择：',_this.labelInfos[0]);
            	let id  = parseInt(e.target.id);
            	let popupId = parseInt(e.target.dataset.popupid);
            	
            	if (_this.labels[popupId].isDisabled) {
            		return;
            	}
            	// 多选
            	//Array.indexOf(index);  表示Array数组中是否包含 index 值，包含则返回该值在数组中的下标，否则返回 -1
            	if (_this.labels[popupId].type === 'checkbox') {
            		if (_this.labels[popupId].actives.indexOf(id) !== (-1)) {
            			for (let i = 0; i < _this.labels[popupId].actives.length; i++) {
            				if (_this.labels[popupId].actives[i] === id) {
            					//  当前选中的标签已经被选中了，所以进行删除选中标签相关
            					_this.labels[popupId].actives.splice(i,1);
            					if (_this.labels[popupId].list[id].oS) {
            						for (let k = 0; k < _this.labels.length; k++) {
            							if (_this.labels[k].value === _this.labels[popupId].list[id].Code) {
            								_this.labels.splice(k,1);	// 删除
            							}
            						}
            					}
            				}
            			}
            		}else {
            			//  当前选中的标签 未选中，所以进行添加选中标签相关
            			_this.labels[popupId].actives.push(id);
            			
            			if (_this.labels[popupId].list[id].oS) {
            				let item = {
            					title:_this.labels[popupId].list[id].oS[0].Name,
            					Code:_this.labels[popupId].list[id].oS[0].Code,
            					isShow:true,
            					value:_this.labels[popupId].list[id].Code,
            					row:48,
            					isDisabled:false,
            					type:'audio',
            					info:_this.labels[popupId].list[id].oS[0],
            					actives:[],
            					list:_this.labels[popupId].list[id].oS[0].childs
            				}
            				if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
            					item.type = 'audio';
            				}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
            					item.type = 'checkbox';
            				}
            				if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
            					item.isDisabled = true;
            				}
            				// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
            				_this.labels.splice((popupId+1),0,item);
            			}
            		}
            	}
            	
            	//  单选
            	if (_this.labels[popupId].type === 'audio') {
            		if (_this.labels[popupId].actives.length === 0) {
            			_this.labels[popupId].actives.push(id);
            			
            			if (_this.labels[popupId].list[id].oS) {
            				let item = {
            					title:_this.labels[popupId].list[id].oS[0].Name,
            					Code:_this.labels[popupId].list[id].oS[0].Code,
            					isShow:true,
            					value:_this.labels[popupId].list[id].Code,
            					row:48,
            					isDisabled:false,
            					type:'audio',
            					info:_this.labels[popupId].list[id].oS[0],
            					actives:[],
            					list:_this.labels[popupId].list[id].oS[0].childs
            				}
            				if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
            					item.type = 'audio';
            				}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
            					item.type = 'checkbox';
            				}
            				if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
            					item.isDisabled = true;
            				}
            				// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
            				_this.labels.splice((popupId+1),0,item);
            			}
            		}else {
            			//  单选选中过值的，首先处理选中的值是否添加过 子标签，添加过则删除 。 然后处理但钱选中标签是否有 子标签，有则添加
            			
            			if (_this.labels[popupId].list[_this.labels[popupId].actives[0]].oS && _this.labels[popupId].actives[0] !== id) {
            				let array = JSON.parse(JSON.stringify(_this.labels));
            				for (var k = 0; k < array.length; k++) {
            					if (array[k].value === array[popupId].list[array[popupId].actives[0]].Code) {
            						_this.labels.splice(k,1);	// 删除
            					}
            				}
            				
            				_this.labels[popupId].actives = [];
            				_this.labels[popupId].actives.push(id);
            			}else if(_this.labels[popupId].actives[0] !== id) {
            				if (_this.labels[popupId].list[id].oS) {
            					let item = {
            						title:_this.labels[popupId].list[id].oS[0].Name,
            						Code:_this.labels[popupId].list[id].oS[0].Code,
            						isShow:true,
            						value:_this.labels[popupId].list[id].Code,
            						row:48,
            						isDisabled:false,
            						type:'audio',
            						info:_this.labels[popupId].list[id].oS[0],
            						actives:[],
            						list:_this.labels[popupId].list[id].oS[0].childs
            					}
            					if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
            						item.type = 'audio';
            					}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
            						item.type = 'checkbox';
            					}
            					if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
            						item.isDisabled = true;
            					}
            					// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
            					_this.labels.splice((popupId+1),0,item);
            				}
            				
            				_this.labels[popupId].actives = [];
            				_this.labels[popupId].actives.push(id);
            			}else {
            				if (_this.labels[popupId].list[_this.labels[popupId].actives[0]].oS) {
            					let array = JSON.parse(JSON.stringify(_this.labels));
            					for (var k = 0; k < array.length; k++) {
            						if (array[k].value === array[popupId].list[array[popupId].actives[0]].Code) {
            							_this.labels.splice(k,1);	// 删除
            						}
            					}
            				}
            				_this.labels[popupId].actives = [];
            			}
            		}
            	}
            },
			loadMore() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.zcQueryInsurePolicy4SalesMan('init');
			},
            // 获取订单标签
            zcGetInsurePolicyQueryCondition() {
                uni.showLoading({
                	title: '加载中',
                	mask: true
                });
                _this.$ZcPublic.Server.Post({
                	IsNeedLogin: true,
                	Paras: {
                		Name: 'uni_Insure_Detail',
                		Action: 'Ext_GetInsurePolicyQueryCondition',
                		Data: {}
                	},
                	Callback:function(resjson,scope) {
                		if (resjson.state === 'back') {
                			console.log('标签 = ',resjson.data);
                			if (!resjson.success) {
                				uni.showModal({
                					title:'温馨提示',
                					showCancel:false,
                					content:''+resjson.msg
                				})
                				return;
                			}
                			
                			//  标签 数据初始化
                			_this.labels = [];
                			_this.labelInfos = [];
                			if (resjson.data['Labels'] && resjson.data.Labels !== null && resjson.data.Labels.length > 0) {
                				_this.labelInfos = resjson.data.Labels;
                				
                				for (let i = 0; i < resjson.data.Labels.length; i++) {
                					if (resjson.data.Labels[i].childs !== null && resjson.data.Labels[i].childs.length > 0) {
                						for (let j = 0; j < resjson.data.Labels[i].childs.length; j++) {
                							let item = {
                								title:resjson.data.Labels[i].childs[j].Name,
                								Code:resjson.data.Labels[i].childs[j].Code,
                								isShow:true,
                								value:'',
                								isDisabled:false,
                								row:48,
                								type:'audio',
                								info:resjson.data.Labels[i].childs[j],
                								actives:[],
                								list:resjson.data.Labels[i].childs[j].childs
                							}
                							if (resjson.data.Labels[i].childs[j].sModel === '单选') {
                								item.type = 'audio';
                							}else if (resjson.data.Labels[i].childs[j].sModel === '多选') {
                								item.type = 'checkbox';
                							}
                							if (resjson.data.Labels[i].childs[j].OnlyWrite) {
                								item.isDisabled = true;
                							}
                							for (var s = 0; s < resjson.data.Labels[i].childs[j].childs.length; s++) {
                								if (resjson.data.Labels[i].childs[j].childs[s].isS) {
                									item.actives.push(s);
                								}
                							}
                							_this.labels.push(item);
                							
                							//  判断是否存在 二级标签
                							for (var k = 0; k < resjson.data.Labels[i].childs[j].childs.length; k++) {
                								
                								if (resjson.data.Labels[i].childs[j].childs[k].oS !== null && resjson.data.Labels[i].childs[j].childs[k].isS && resjson.data.Labels[i].childs[j].childs[k].oS.length > 0) {
                									
                									for (var m = 0; m < resjson.data.Labels[i].childs[j].childs[k].oS.length; m++) {
                										let item1 = {
                											title:resjson.data.Labels[i].childs[j].childs[k].oS[m].Name,
                											Code:resjson.data.Labels[i].childs[j].childs[k].oS[m].Code,
                											isShow:true,
                											value:resjson.data.Labels[i].childs[j].childs[k].Code,
                											isDisabled:false,
                											row:48,
                											type:'audio',
                											info:resjson.data.Labels[i].childs[j].childs[k].oS[m],
                											actives:[],
                											list:resjson.data.Labels[i].childs[j].childs[k].oS[m].childs
                										}
                										if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '单选') {
                											item1.type = 'audio';
                										}else if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '多选') {
                											item1.type = 'checkbox';
                										}
                										if (resjson.data.Labels[i].childs[j].childs[k].oS[m].OnlyWrite) {
                											item1.isDisabled = true;
                										}
                										for (var t = 0; t < resjson.data.Labels[i].childs[j].childs[k].oS[m].childs.length; t++) {
                											if (resjson.data.Labels[i].childs[j].childs[k].oS[m].childs[t].isS) {
                												item1.actives.push(t);
                											}
                										}
                										_this.labels.push(item1);
                									}
                									
                								}
                							}
                							
                						}
                					}
                				}
                			}
                			
                		}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
                	},
                	Scope: this
                })
            },
			zcQueryInsurePolicy4SalesMan(init) {
                if (!init) {
                    _this.StartRow = 0;
                    _this.InsurePolicy = [];
                }
                let search = {
                	data:_this.inputValue,
                    StartRow:_this.StartRow,
                    RowCount:20,
                	dataLabels:[]	// 所选标签
                }
                if (_this.inputValue) {
                	search.data = _this.inputValue;
                }
                //  标签筛选条件
                for (let i = 0; i < _this.labels.length; i++) {
                	if (_this.labels[i].actives.length > 0) {
                		for (var k = 0; k < _this.labels[i].actives.length; k++) {
                			let item = _this.labels[i].list[_this.labels[i].actives[k]].SN;
                			search.dataLabels.push(item);
                		}
                	}
                }
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryInsurePolicy4SalesMan',
						Data: search
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('保单 列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data.length > 0) {
								_this.StartRow = _this.StartRow + resjson.data.length;	// 初始化 下次加载开始下标
								_this.dataLength = resjson.data.length;
								if (_this.dataLength < 20) {
									if (_this.StartRow >= 20) {
										_this.loadingText = '没有更多了...';
									}else{
										_this.loadingText = '';
									}
								}else {
									_this.loadingText = '加载更多...';
								}
								
								
								for (let i = 0; i < resjson.data.length; i++) {
									_this.InsurePolicy.push(resjson.data[i]);
								}
							}else {
								_this.isNoDataShow = true;
							}
                            
                            if (!init) {
                            	_this.isShow = !_this.isShow;
                            }
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
			},
			zcInsurePolicyInfo(item) {
				uni.navigateTo({
					url: '../myWarranty_info/myWarranty_info?InsurePolicySN='+item.SN
				});
			},
			
		}
	}
</script>

<style>
	.container{position: absolute;top: 0;left: 0;display: flex;flex-direction: column;}
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		background-color: #FFFFFF;
		height: 60upx;
		/* border-radius: 6px; */
		/* padding: 0 4%; */
		flex-wrap: nowrap;
		margin: 10upx 20upx;
		line-height: 60upx;
		flex: 1;
		padding-right: 16upx;
		border-right: 2upx solid #CCCCCC;
	}
	
	.input-view .uni-icon {
		line-height: 36upx !important;
		font-size: 36upx!important;
	}
	
	.input-view .input {height: 60upx;line-height: 60upx;padding: 0 3%;flex: 1;}
    .zcModel-active{padding-right: 20upx;display: flex!important;align-items: center!important;}
    .icon-shaixuan:before{
    	margin-right: 10upx;
    	color: #3CA4FA;
    }
	/* 筛选-样式区 */
    .content{flex: 1;height: 100%;position: relative;box-sizing: border-box;overflow: auto;}
	.zcBut{padding: 16upx 40upx;background-color: #e6e6e6!important;font-size: 30upx;margin: 0;margin-right: 30upx;color: #333333!important;display: flex;align-items: center;line-height: 1;}
	.zcBut:last-child{background-color: #26a6ff!important;color: #FFFFFF!important;}
	.button-hover{opacity: 0.6;}
	.popup_content{
		display: flex;
		flex-wrap: wrap;
		padding: 0upx 20upx;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	.popup_item{
		display: flex;
		float: left;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border: 1px solid #999999;
		color: #999999;
		margin: 10upx 1%;
		height: 46upx;
		border-radius: 46upx;
		box-sizing: border-box;
	}
	.active{border-color: #26a6ff;color: #26a6ff;}
	/* 列表样式 */
	.zcModelItem{height: 100%;display: flex;flex-direction: column;flex: 1;overflow: hidden;}
	.list{overflow: auto!important;}
	.zcModel-card{margin: 20upx;padding: 20upx 0!important;background-color: #FFFFFF;box-shadow: 0 1px 5px #CCCCCC;border-radius: 10upx;}
	.zcModel-card-title{border-bottom: 2upx solid #E5E5E5;padding: 10upx 20upx;}
	.zcModel-card-title view{font-size: 30upx;}
	.zcModel-card-title>view:last-child view:first-child{font-size: 22upx!important;margin-right: 6upx;margin-top: 12upx;}
	.zcModel-card-item{padding: 10upx 20upx;box-sizing: border-box;}
	.zcModel-card-item view{display: flex;box-sizing: border-box;line-height: 1;font-size: 24upx;}
	.zcModel-card-item view:first-child{flex-shrink: 0;margin-right: 20upx;}
	.zcModel-card-item view:last-child{flex-shrink: 0;}
	.zcModel-card-item-text{white-space: normal;display: block;width: 60%;}
    /* 2019-10-24样式调整 */	
    /* .insureCompany{
        position:relative ;
        top:-4upx;
        font-size: 34upx;
        font-weight: 400;
    } */
    .list_info_middle{
        padding: 20upx 0;
        border-bottom: 1upx solid  #E5E5E5;
    }
    .list_info_left{
            text-align: left;
            margin-left: 45upx;
    }
    .list_info_left>view{
        font-size: 36upx;
        margin-top: 10upx ;
        font-weight: 500;
    }
    .list_info_left>view:first-child{
        margin-bottom: 25upx 
    }
    .list_info_middle>view:nth-of-type(2)>view{
        /* font-size: 28upx; */
        margin-bottom: 12upx;
    }
    .list_info_middle>view:nth-of-type(3){
        position: relative;
        top: -48upx;
        right:10upx;
        padding: 11upx 20upx 10upx 20upx;
        border-radius: 25upx;
        background-color:#029CFB ;
        color:#fff;
        /* font-size: 29upx; */
    }
    .list_info_bottom{
        padding-top: 12upx;
    }
    .list_info_bottom>view:first-child{position: relative;justify-content: center;}
    .list_info_bottom>view:first-child:after{border-right: 2upx solid #E5E5E5;height: 70%;content: '';position: absolute;right: 0;}
    .list_info_bottom>view>view:nth-of-type(1){
        color: #979797;
    }
    .list_info_bottom>view>view:nth-of-type(2){height: 46upx;}
	/* 分页底部说明样式 */
	.uni-tab-bar-loading{text-align: center;margin: 0;}
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
